<template>
  <div id="mainDiv">
    <el-timeline>
      <el-timeline-item timestamp="2018/4/12" hide-timestamp="true" v-for="item in serviceList" :key="item">
        <el-card>
          <p v-show="item.status == 1" style="float: right">
            <el-tag type="danger"> 待处理</el-tag>
          </p>
          <p v-show="item.status == 2" style="float: right">
            <el-tag type="success"> 已完成</el-tag>
          </p>
          <p>位置: {{ item.buildingId }} - {{ item.address }}</p>
          <h4>描述: {{ item.desc }}</h4>
          <p>推荐维修时间: {{ formatDate(item.startTime) }} - {{ formatDate(item.endTime) }}</p>
          <p style="float: right"> ---- {{ item.creater }} {{ item.tel }}</p>
          <p>
            <el-button type="success" size="small" style="margin-top: 10px" @click="repairService(item.id)"
                       v-show="item.status == 1">确认完成
            </el-button>
          </p>
          <p v-show="item.status == 2" style="margin-top: 20px">维修时间: {{ formatDate(item.repairTime) }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: "adminService",
  data() {
    return {
      serviceList: []
    }
  },
  methods: {
    formatDate(val) {
      var date = new Date(parseInt(val));
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDay()}${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    },
    repairService(id) {
      this.$axios.post("/service/repairService.do", {
        id: id
      }).then(resp => {
        this.$message({
          message: resp.data.message,
          type: 'success'
        });
        this.onMounted();
      }, err => {
        console.log(err);
      })
    },
    onMounted() {
      // 获取报修列表
      this.$axios.post("/service/getServiceOrderList.do").then(resp => {
        this.serviceList = resp.data.data;
      }, err => {
        console.log(err);
      })
    },
  },
  created() {
    this.onMounted();
  }
}
</script>

<style scoped>
#mainDiv {
  width: 700px;
  margin: 0 auto;
}
</style>
